<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>质保信息查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/index/css/car_detail.css">
</head>
<body>


<div class="container">
    <img src="/static/index/images/logo.png" class="logo">
    <div class="main-box">
        <div class="main">
            <h1 class="title">质保信息查询</h1>
            <div class="form-item">
                <img src="/static/index/images/screen.png" class="screen">
                <input type="text" id="search_value" placeholder="请输入车牌/车架号/防伪流水号/联系方式">
            </div>
        </div>

        <div id="box">

        </div>
        <div id="nothing" style="display: none">暂无查询结果</div>

        <div class="btn-box">
            <button class="search submit-btn">查询</button>
            <a href="javascript:history.back()" class="back-btn">返回</a>
        </div>
    </div>

</div>
</body>
<script src="/static/jquery/jquery-3.1.1.min.js"></script>
<script src="__STATIC__/layer/layer.js"></script>
<script src="/static/index/js/common.js"></script>
<script>
    $('.search').click(function () {
        var index = layer.load(2, {shade: [0.2, '#000']});

        var search_value = $('#search_value').val();
        $.post('/index/index/searchInformation', {search_value}, res => {
            var res = JSON.parse(res);
            var html = '';
            if (res.result == 1) {
                var list = res.data;
                list.forEach(val => {
                    var {shop_name, license_plate, vin, car_model, year, machine_model, serial_number, customer_name, customer_mobile, installation_date} = val;
                    html += `<div class="row">
                                <p>车牌：<span class="font">${license_plate}</span></p>
                                <p>车架号：<span class="font">${vin}</span></p>
                                <p>车型：<span class="font">${car_model}</span></p>
                                <p>年份：<span class="font">${year}</span></p>
                                <p>机器型号：<span class="font">${machine_model}</span></p>
                                <p>防伪流水号：<span class="font">${serial_number}</span></p>
                                <p>客户姓名：<span class="font">${customer_name}</span></p>
                                <p>联系方式：<span class="font">${customer_mobile}</span></p>
                                <p>安装门店：<span class="font">${shop_name}</span></p>
                                <p>安装日期：<span class="font">${installation_date}</span></p>
                            </div>`;
                })

                $('#nothing').hide();
                $('#box').show();
                layer.close(index);
            } else if(res.result == 2) {
                layer.close(index);
                layer.msg(res.msg, {icon: -1, time: 1000});
                $('#nothing').show();
                $('#box').hide();
            }else{
                layer.close(index);
                layer.msg(res.msg, {icon: -1, time: 1000});
                setTimeout(() => {
                    window.location.href = '/index/index/login'
                },800)
            }

            $('#box').html(html);
        })
    })
</script>
</html>
